<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
		<!-- 加此js，就会支持#hash路由 -->
		<script src="js/vue-router.js"></script>
		
		<!-- 高亮修饰 -->
		<style>
			.router-link-active {
				color: white;
				font-size: 30px;
				text-decoration: none;
				background-color: blue;
				
				border-radius: 5px;
				
				margin: 5px;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<a href="#/login">登录</a>
				<a href="#/register">注册</a>
			</div>
			<div>
				<router-link to="/login">登录</router-link>
				<router-link to="/register">注册</router-link>
			</div>
			
			<router-view></router-view>
		</div>
	</body>
	<script>
		var login = {
			template: '<h1>登录组件</h1>'
		}
		
		var register = {
			template: '<h1>注册组件</h1>'
		}
		
		
		var routerObj = new VueRouter({
			routes:[
				{path:'/', redirect: '/login'},		//重定向指定url
				{path:'/login', component: login},
				{path:'/register', component:register}
			]
		})
		
		var vm = new Vue({
			el: '#app',
			data: {},
			methods: {},
			router: routerObj
		})
	</script>
</html>
